<template>
    <!-- 骨架屏加载动画，loading 为 true 时显示骨架，false 时显示数据内容 -->
    <el-skeleton :loading="loading" animated>
        <!-- 骨架屏模板 -->
        <template #template>
            <el-skeleton-item variant="h1" style="width: 50%;" />
            <el-skeleton-item variant="p" style="width:100%" />
            <el-skeleton-item variant="p" style="width:75%" />
            <el-skeleton-item variant="p" style="width:100%" />
            <el-skeleton-item variant="p" style=" width:80%" />
            <el-skeleton-item variant="p" style="width:100%" />
            <el-skeleton-item variant="p" style=" width:95%" />
            <el-skeleton-item variant="p" style="width:100%" />
        </template>
        <!-- 数据内容显示 -->
        <template #default>
            <!-- 遍历数据列表，逐项显示 -->
            <p v-for="item in data" class="fontStyle">{{ item.name }} : {{ item.data }}</p>
        </template>
    </el-skeleton>
</template>

<script setup>
// 引入 vue 的响应式方法
import { ref } from 'vue'
// 引入 element-plus 骨架屏组件
import { ElSkeleton, ElSkeletonItem } from 'element-plus'

// 加载状态
const loading = ref(false)

// 数据列表
let data = ref([
    {
        name: '数据1', // 数据项名称
        data: '数据1', // 数据项内容
    },
    {
        name: '数据2',
        data: '数据2',
    },
    {
        name: '数据3',
        data: '数据3',
    },
    {
        name: '数据4',
        data: '数据4',
    },
    {
        name: '数据5',
        data: '数据5',
    }
])
</script>

<style scoped>
/* 标题和状态标签样式（如有需要可复用） */
.top {
    position: relative;
}

.top h1 {
    font-size: 20px;
    margin-bottom: 1%;
}

.top span {
    position: absolute;
    right: 1%;
    top: 1%;
    color: white;
    font-size: 14px;
    border-radius: 10px;
    padding: 2px 1%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 按钮区域样式（如有需要可复用） */
.button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* 数据项文本样式 */
.fontStyle{
    font-size: 16px;
    margin-bottom: 10px;
    color: black;
    line-height: 1.5;
}
</style>
